/* commom方法样式 */

/* 怪异盒模型 */
*{box-sizing:border-box;}

/* loading */
.gu_loading{ width:100%; height:100%; position:fixed; top:0; left:0; }
.gu_loading .loading_main{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); background:rgba(0, 0, 0, 0.5); border-radius:.3125rem; }
.gu_loading .loading_main .close{ position:absolute; top:-0.40625rem; right:-0.40625rem; width:.546875rem; line-height:.546875rem; border:solid #000 .015625rem; border-radius:50%; text-align:center; color:rgba(0, 0, 0, 0.6);; font-size:.4375rem; }
.gu_loading .loading_main .text{ width:2.34375rem; color:#fff; text-align:center; font-size:.40625rem; margin:-0.34375rem 0 .15625rem 0; padding:0 .15625rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.gu_loading .loading_main .circle_bounce{ width:2.34375rem; height:2.34375rem; position:relative; }
.gu_loading .loading_main .circle_bounce .child{ width:100%; height:100%; position:absolute; left:0; top:0; padding:.625rem; }
.gu_loading .loading_main .circle_bounce .child:before{ content:''; display:block; margin:0 auto; width:15%; height:15%; background-color:#fff; border-radius:50%; -webkit-animation:circle_bounce_delay 1.2s infinite ease-in-out both; animation:circle_bounce_delay 1.2s infinite ease-in-out both; }
.gu_loading .loading_main .circle_bounce .circle-2{ -webkit-transform:rotate(30deg); transform:rotate(30deg); }
.gu_loading .loading_main .circle_bounce .circle-3{ -webkit-transform:rotate(60deg); transform:rotate(60deg); }
.gu_loading .loading_main .circle_bounce .circle-4{ -webkit-transform:rotate(90deg); transform:rotate(90deg); }
.gu_loading .loading_main .circle_bounce .circle-5{ -webkit-transform:rotate(120deg); transform:rotate(120deg); }
.gu_loading .loading_main .circle_bounce .circle-6{ -webkit-transform:rotate(150deg); transform:rotate(150deg); }
.gu_loading .loading_main .circle_bounce .circle-7{ -webkit-transform:rotate(180deg); transform:rotate(180deg); }
.gu_loading .loading_main .circle_bounce .circle-8{ -webkit-transform:rotate(210deg); transform:rotate(210deg); }
.gu_loading .loading_main .circle_bounce .circle-9{ -webkit-transform:rotate(240deg); transform:rotate(240deg); }
.gu_loading .loading_main .circle_bounce .circle-10{ -webkit-transform:rotate(270deg); transform:rotate(270deg); }
.gu_loading .loading_main .circle_bounce .circle-11{ -webkit-transform:rotate(300deg); transform:rotate(300deg); }
.gu_loading .loading_main .circle_bounce .circle-12{ -webkit-transform:rotate(330deg); transform:rotate(330deg); }
.gu_loading .loading_main .circle_bounce .circle-2:before{ -webkit-animation-delay:-1.1s; animation-delay:-1.1s; }
.gu_loading .loading_main .circle_bounce .circle-3:before{ -webkit-animation-delay:-1s; animation-delay:-1s; }
.gu_loading .loading_main .circle_bounce .circle-4:before{ -webkit-animation-delay:-0.9s; animation-delay:-0.9s; }
.gu_loading .loading_main .circle_bounce .circle-5:before{ -webkit-animation-delay:-0.8s; animation-delay:-0.8s; }
.gu_loading .loading_main .circle_bounce .circle-6:before{ -webkit-animation-delay:-0.7s; animation-delay:-0.7s; }
.gu_loading .loading_main .circle_bounce .circle-7:before{ -webkit-animation-delay:-0.6s; animation-delay:-0.6s; }
.gu_loading .loading_main .circle_bounce .circle-8:before{ -webkit-animation-delay:-0.5s; animation-delay:-0.5s; }
.gu_loading .loading_main .circle_bounce .circle-9:before{ -webkit-animation-delay:-0.4s; animation-delay:-0.4s; }
.gu_loading .loading_main .circle_bounce .circle-10:before{ -webkit-animation-delay:-0.3s; animation-delay:-0.3s; }
.gu_loading .loading_main .circle_bounce .circle-11:before{ -webkit-animation-delay:-0.2s; animation-delay:-0.2s; }
.gu_loading .loading_main .circle_bounce .circle-12:before{ -webkit-animation-delay:-0.1s; animation-delay:-0.1s; }
@-webkit-keyframes circle_bounce_delay {
    0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    }
    40% {
    -webkit-transform: scale(1);
            transform: scale(1);
    }
}
@keyframes circle_bounce_delay {
    0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    }
    40% {
    -webkit-transform: scale(1);
            transform: scale(1);
    }
}
